import React, { useState } from "react";
import './ArticleList.scss'
import bar from '../../images/touxiang.jpg'

const List = () => {

    const articleData = [
        {
            title: '测试文章',
            content: '11111111222222222222222222233333333333333344444444444444444444',
            coverImg: '',
            tag: ['测试', '分类11'],
            time: '2023-11-13',
            pv: '111',
            id: 1
        },
        {
            title: '测试文章',
            content: '111111112222222222222222222333333333333333444444444444444444441111111122222222222222222223333333333333334444444444444444444411111111222222222222222222233333333333333344444444444444444444',
            coverImg: '',
            tag: ['测试', '分类22'],
            time: '2023-11-13',
            pv: '111',
            id: 2
        },
        {
            title: '测试文章',
            content: '11111111222222222222222222233333333333333344444444444444444444',
            coverImg: '',
            tag: ['测试', '分类33'],
            time: '2023-11-13',
            pv: '111',
            id: 3
        }
    ]

    // 渲染数组
    const listResult = articleData.map(item => {
        return (
            <div className="listBox" key={item.id}>
                <div className="leftBox">
                    <img className='articleImg' src={bar}></img>
                    <div className="articleTime"><span>{item.time}</span></div>
                    <div className="articlePv">访问量：{item.pv}</div>
                    <div className="articleTag">
                        {
                            item.tag.map(items => {
                                return(
                                    <div className="tagItem">{items}</div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="rightBox">
                    <div className="articleTitle">{item.title}</div>
                    <div className="articleContent">{item.content}</div>
                </div>
            </div>
        )
    })

    console.log(listResult, 'listResult');

    return (
        <div>
            {listResult}
        </div>
    )

}

export default List;